﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<script src="../js/header.js"></script>
		<title>登录页面</title>
		<style type="text/css">
			body {
				background: url(../images/login_back.png) no-repeat center center;
				background-size: cover;
				background-attachment: fixed;
				
			}
			
			.logo {
				float: left;
				width: 140px;
				height: 140px;
				
			}
			.title {
				float: left;
				margin-top: 35px;
				margin-left: 19px;
				font-family: PingFangSC-Semibold;
				font-size: 50px;
				color: #FFFFFF;
				letter-spacing: 0px;
				line-height: 70px;
				
			}
			.login_title {
				margin-top: 21px;
				width: 100%;
				height: 48px;
				text-align: center;
				font-family: PingFangSC-Semibold;
				font-size: 34px;
				color: #323232;
				letter-spacing: 0px;
				line-height: 48px;
			}
			.demo-ruleForm {
				position: relative;
				overflow: hidden;
				margin: 49px auto 100px;
				width: 587px;
				height: 517px;
				background: rgba(255, 255, 255, 0.9);
				border-radius: 10px;
				
			}
			.name {
				margin-left: 77px;
				margin-top: 23px;
				width: 432px;
				height: 60px;
			}
			.pass {
				margin-left: 77px;
				margin-top: 33px;
				width: 432px;
				height: 60px;
			}
			.formitem {
				background: rgba(255,255,255,0.00);
				border: 0px solid #AEAEAE;
				border-radius: 10px;
			}
			
			.verify_css {
				margin-left: 0;
				width: 291px;
			}
			.yanzhengma {
				position: relative;
				top: 13px;
			}
			.login_btn_text {
				font-family: MicrosoftYaHei;
				font-size: 28.19px;
				color: #FFFFFF ;
				letter-spacing: 0;
			}
			.login-button {
				margin-left: 77px;
				margin-top: 23.4px;
				width: 432px;
				height: 65px;
				background-image: linear-gradient(90deg, #1D5899 0%, #157DD4 100%);
				border-radius: 10px;
			}
			.toregist {
				margin-right: 59px;
				margin-bottom: 35px;
				font-family: PingFangSC-Medium;
				font-size: 14px;
				color: #323232;
				letter-spacing: 0;
				
			}
			.verify_all {
				margin-left: 77px;
				margin-top: 28px;
				width: 432px;
				height: 59.6px;
				
			}

		</style>
	</head>

	<body>
		<div id="app" style="min-width: 1100px;">
			<el-row type="flex" justify="center">
				<el-col :span="24" style="margin-top: 101px; text-align: center;" >
					<div style="display: inline-block;">
							<img src="../images/loginlogo.png"  class="logo">
							<span class="title">中国地震局“互联网+监管”系统</span>
							<div style="clear: both;"></div>
					</div>
				</el-col>
			</el-row>
			<el-form :model="loginForm" status-icon :rules="rules" ref="loginForm"  class="demo-ruleForm" @keyup.native.enter="submitForm('loginForm')">
				<h3 class="login_title">登&emsp;录</h3>
				<el-form-item class="name formitem" prop="loginName">
					<el-input prefix-icon="el-icon-user" v-model.trim="loginForm.loginName" placeholder="请输入用户名"></el-input>
				</el-form-item>
				<el-form-item class="pass formitem"  prop="password">
					<el-input prefix-icon="el-icon-key" placeholder="请输入密码" v-model.trim="loginForm.password" show-password></el-input>
				</el-form-item>
				<!--<el-form-item class="formitem verify_all" prop="verifyCode" >
					<el-input class="verify_css" placeholder="请输入4位验证码" v-model="loginForm.verifyCode" @keyup.enter.native="submitForm('ruleForm')"></el-input>
					<span class="yanzhengma" id="v_container"></span>
				</el-form-item>-->
				<el-form-item >
					<el-button class="login-button" type="primary" @click="submitForm('loginForm')">
						<span class="login_btn_text">登&nbsp;录</span>
					</el-button>
				</el-form-item>
			<!--	<el-form-item style="text-align: right;">
					<span class="toregist">还没账户，请<a href="register.html">注册</a></span>
				</el-form-item>-->
			</el-form>
		</div>
		<script>
			
			var login = new Vue({
				el: '#app',
				data() {
					let checkCode = (rule, value, callback) => {
						 var verifyFlag = this.verifyCode.validate(value);
               			 if (!verifyFlag) {
                   			 callback(new Error('验证码不正确'));
                		} else {
                   			 callback();
              		  }
            		}
					return {
						loginForm: {
							loginName: "",
							password: "",
							verifyCode: "",
							appCode:"",
						},
						rules: {
							loginName: [{
									required: true,
									message: '请输入用户名',
									trigger: 'blur'
								}, //触发
								{
									min: 2,
									max: 50,
									message: '长度在 2 到 50 个字符',
									trigger: 'blur'
								}
							],
							password: [{
									required: true,
									message: '请输入密码',
									trigger: 'blur'
								}, //触发
								{
									min: 6,
									message: '密码不小于6位',
									trigger: 'blur'
								}
							],
							verifyCode: [{
								required: true,
								message: '请输入验证码',
								trigger: 'blur'
							},{
								validator: checkCode,
								trigger: 'blur'
							}]
						}
					}
				},
				mounted() {
					//this.verifyCode = new GVerify('v_container')
				},
				methods: {

					resetForm(formName) {
						this.$refs[formName].resetFields();
					},
					submitForm(formName) {
					// 获取验证码
					/*var verifyCode = this.ruleForm.verifyCode;
					var verifyFlag = this.verifyCode.validate(verifyCode);
					if(!verifyFlag) {
						that.$message.error({
							title: '系统提示',
							message: '验证码输入错误'
						})
					}*/
						this.$refs[formName].validate((valid) => {
                            if(valid) {
                                localStorage.setItem("pwd",JSON.stringify(this.loginForm.password));
								var  encrypt = new JSEncrypt();
								encrypt.setPublicKey(publicKey);
								let result = encrypt.encrypt(this.loginForm.password);

								/*this.loginForm.password=result;
								this.loginForm.appCode=appCode;*/
                                axios({
                                    method: 'post',
                                    url: appBaseUrl + '/login/doLogin',
                                    // url: 'http://10.13.16.135:8081/base/user/doLogin',
                                    data: {
                                        password: result,
                                        appCode: appCode,
                                        loginName: this.loginForm.loginName,

                                    }
                                })
                                    .then(response => {
                                    	debugger;
                                        let data = response.data;
                                        if(data.code == 200) {
                                            localStorage.setItem("userInfo", JSON.stringify(data.data));
                                            location.href = location.origin + appBaseUrl + '/html/mainwork/main-work.html';
                                        } else {
                                            this.$message.error(data.msg);
                                        }
                                    })
                                    .catch(function(error) {
                                        console.log(error);
                                    });
                            } else {
                                console.log("login error!!");
                                return false;
                            }
						});
					}
				}
			})
		</script>
	</body>

</html>